<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: pink;
    }
    #app{
        background-color: #eeeeee;
        width: 400px;
        height: 600px;
        border-radius: 10px;
        margin: 50px auto;
        position: relative;
    }
    #app input{
        border: none;
        background-color: #eee;
        border-bottom: 2px orange dashed;
    }
    .inp{
        width: 250px;
        margin: auto;
    }
    #item{
        display: flex;
        justify-content: space-between;
    }
    #bottom{
        /* margin-top: 450px; */
        position: absolute;
        bottom: 20px;
        margin-left: 20px;
        box-sizing: border-box;
        /* border: 1px solid black; */
    }
    #bottom button{
        
        border: none;
    }
    .orange{
        background-color: orange;
    }
    .alive{
        border-radius: 10px;
        background-color: orange;
        color: white;
    }
    .dele{
        text-decoration: line-through;
    }
</style>
<body>
    <div id="app">
        <h2 style="text-align: center;">To-Do-List</h2>
        <h4 style="text-align: center;">~Today I need to~</h4>
        <div class="inp">
            <input type="text" placeholder="Add new todo..." v-model="txt">
            <button @click="add" >Submit</button>
        </div>
        <div v-for="(ele,i) in todolist" :key="ele.id" id="item" v-if="flag==0" :class="{'alive':ele.status==true}">
            <div :class="{'dele':ele.status==true}">
                <input type="checkbox" v-model="ele.status" :checked="ele.status" @change="change">
                {{ele.txt}}
            </div>
            <div @click="del(i)" style="margin-right: 30px;user-select: none;">
                X
            </div>
        </div>
        <div v-for="(ele,i) in todolist" :key="ele.id" id="item" v-if="flag==1&&ele.status==false">
            <div>
                <input type="checkbox" v-model="ele.status" :checked="ele.status" @change="change">
                {{ele.txt}}
            </div>
            <div @click="del(i)" style="margin-right: 30px;user-select: none;">
                X
            </div>
        </div>
        <div v-for="(ele,i) in todolist" :key="ele.id" id="item" v-if="flag==2&&ele.status==true" :class="{'alive':ele.status==true}">
            <div :class="{'dele':ele.status==true}">
                <input type="checkbox" v-model="ele.status" :checked="ele.status" @change="change">
                {{ele.txt}}
            </div>
            <div @click="del(i)" style="margin-right: 30px;user-select: none;">
                X
            </div>
        </div>
        <div id="bottom" v-if="todolist.length>0">
            <span>{{num}} item left</span>
            <button @click="flag=0" :class="{'orange':flag==0}">All</button>
            <button @click="flag=1" :class="{'orange':flag==1}" v-show="alive==false||every==false">Active</button>
            <button @click="flag=2" :class="{'orange':flag==2}" v-show="alive==false||every==false">Completed</button>
            <button @click="delcomplet" class="orange" v-show="some==true">Clear Completed</button>
        </div>
    </div>
</body>
<script src="./vue-2.6.12.js"></script>
<script>
    try{
        console.log(sessionStorage.getItem('b',JSON.parse(b)));
    }catch{
        let a=new Vue({
        el:'#app',
        data:{
            flag:0,
            todolist:[],
            txt:'',
            // buttonlist:['Active','Completed']
            alive:true,
            some:false,
            every:true
        },
        methods: {
            add(){
                let obj={
                    id:this.todolist.length+1,
                    txt:this.txt,
                    status:false,
                }
                this.todolist.push(obj)
                // let a=this.todolist.every(ele=>ele.status==true)
                // this.alive=a
                // let b=this.todolist.some(ele=>ele.status==true)
                // this.some=b
                // let c=this.todolist.every(ele=>ele.status==flase)
                // this.every=c
            },
            del(i){
                this.todolist.splice(i,1)
            },
            delcomplet(){
                newlist=[]
                this.todolist.forEach((ele,i)=>{
                    if(ele.status==false){
                        newlist.push(this.todolist[i])
                    }
                })
                this.todolist=newlist
                this.flag=0
                this.some=false
                this.alive=true
                this.every=true
            },
            change(){
                let a=this.todolist.every(ele=>ele.status==true)
                this.alive=a
                let b=this.todolist.some(ele=>ele.status==true)
                this.some=b
                let c=this.todolist.every(ele=>ele.status==false)
                this.every=c
                console.log(c);
                if(c==true){
                    this.alive=true
                }else{
                    this.every=true
                }
            }
        },
        computed:{
            num(){
                let count=0
                this.todolist.forEach(ele=>{
                    if(ele.status==false){
                        count++
                    }
                })
                return count
            }
        },
        watch:{
            
        }
    })
    let b=JSON.stringify(a)
    sessionStorage.setItem('b',b)
    }


    
</script>
</html>